import { genChartByAiUsingPost } from '@/services/luckbi/chartController';
import { UploadOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
import {
  Button,
  Card,
  Col,
  Divider,
  Empty,
  Form,
  Input,
  message,
  Row,
  Select,
  Space,
  Spin,
  Upload,
} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import ReactECharts from 'echarts-for-react';
import React, { useState } from 'react';

/**
 * 添加图表ai请求
 * @constructor
 */
const AddChart: React.FC = () => {
  const [chart, setChart] = useState<API.BiResponse>();
  const [option, setOption] = useState<any>();
  const [submitting, setSubmitting] = useState<boolean>(false);

  // const options = {
  //   grid: { top: 8, right: 8, bottom: 24, left: 36 },
  //   xAxis: {
  //     type: 'category',
  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //   },
  //   yAxis: {
  //     type: 'value',
  //   },
  //   series: [
  //     {
  //       data: [820, 932, 901, 934, 1290, 1330, 1320],
  //       type: 'line',
  //       smooth: true,
  //     },
  //   ],
  //   tooltip: {
  //     trigger: 'axis',
  //   },
  // };

  const onFinish = async (values: any) => {
    if (submitting) {
      return;
    }
    setSubmitting(true);
    setChart(undefined);
    setOption(undefined);
    // 调用后端接口
    const params = {
      ...values,
      file: undefined,
    };
    try {
      message.success('正在分析中，请稍加等待...');
      console.log(values);
      const res = await genChartByAiUsingPost(params, {}, values.file.file.originFileObj);
      console.log('返回結果: ', res);
      if (res?.data) {
        const chartOption = JSON.parse(res.data.genChart ?? '');
        if (!chartOption) {
          throw new Error('解析失败');
        }
        setChart(res.data);
        setOption(chartOption);
        message.success('分析成功');
      } else {
        message.error('分析失败: ' + res.message);
      }
    } catch (e: any) {
      console.log('错误信息: ', e);
      message.error('分析失败：' + e.message);
    }
    setSubmitting(false);
  };

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title="AI实时分析">
            <Form
              name="addChart"
              onFinish={onFinish}
              initialValues={{}}
              labelAlign="left"
              labelCol={{ span: 6 }}
            >
              <Form.Item
                name="goal"
                label="分析目标"
                rules={[{ required: true, message: '请输入分析目标' }]}
              >
                <TextArea placeholder="请输入你的分析需求，比如：分析人口的最近增长情况"></TextArea>
              </Form.Item>
              <Form.Item
                name="name"
                label="图表名称"
                rules={[{ required: true, message: '请输入图表名称' }]}
              >
                <Input placeholder="请输入图表名称"></Input>
              </Form.Item>

              <Form.Item
                name="chartType"
                label="图表类型"
                hasFeedback
                rules={[{ required: true, message: '请选择图表类型' }]}
              >
                <Select
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '饼图', label: '饼图' },
                    { disabled: true, value: '热力图', label: '热力图' },
                    { disabled: true, value: '旭日图', label: '旭日图' },
                    { disabled: true, value: '雷达图', label: '雷达图' },
                    { disabled: true, value: '散点图', label: '散点图' },
                    { disabled: true, value: '地理坐标/地图', label: '地理坐标/地图' },
                    { disabled: true, value: 'K线图', label: 'K线图' },
                    { disabled: true, value: '盒须图', label: '盒须图' },
                    { disabled: true, value: '关系图', label: '关系图' },
                    { disabled: true, value: '路径图', label: '路径图' },
                    { disabled: true, value: '树图', label: '树图' },
                    { disabled: true, value: '矩形树图', label: '矩形树图' },
                    { disabled: true, value: '平行坐标系', label: '平行坐标系' },
                    { disabled: true, value: '桑基图', label: '桑基图' },
                    { disabled: true, value: '漏斗图', label: '漏斗图' },
                    { disabled: true, value: '仪表盘', label: '仪表盘' },
                    { disabled: true, value: '象形柱图', label: '象形柱图' },
                    { disabled: true, value: '主题河流图', label: '主题河流图' },
                  ]}
                ></Select>
              </Form.Item>

              <Form.Item
                name="file"
                label="上传数据"
                rules={[{ required: true, message: '请选择需要分析文件' }]}
              >
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传分析文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item label="示例文件">
                <Button
                  type="link"
                  icon={<VerticalAlignBottomOutlined />}
                  href="/example.xlsx"
                  download
                >
                  下载示例文件
                </Button>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 16, offset: 6 }}>
                <Space>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={submitting}
                    disabled={submitting}
                  >
                    开始分析
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="分析结果">
            <div>
              {chart?.genResult ?? (
                <Empty description="请先在左侧输入数据，开始分析" image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
              <Spin spinning={submitting} />
            </div>
          </Card>
          <Divider></Divider>
          <Card title="图表展示">
            <div>
              {option ? (
                <ReactECharts option={option} />
              ) : (
                <Empty description="请先在左侧输入数据，开始分析" image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
              <Spin spinning={submitting} />
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default AddChart;
